<template>
<div>
  <vm-common-header
    :pageTitle="pageTitle"
    :goBack="goBack">
    <span
      slot="modify"
      class="modify"
      v-show="handlermodifyMateriel && MaterielArr.length > 0 && step != 2"
      @click="modifyMateriel">修改</span>
  </vm-common-header>
  <div class="vm-process-warp" v-show="!handlerMateriel">
    <ul>
      <li class="active">
        <h1>选分类</h1>
        <div class="step">1</div>
      </li>
      <li :class="{ 'active': step >= 1 }">
        <h1>选供应商</h1>
        <div class="step">2</div>
      </li>
      <li :class="{ 'active': step >= 2 }">
        <h1>填写基本信息</h1>
        <div class="step">3</div>
      </li>
    </ul>
  </div>

  <!-- 大类弹框 -->
  <mt-popup
    v-model="LargeClassVisible"
    popup-transition="popup-fade"
    position="left"
    class="largeClass-wrapper">
    <ul class="timeline-container">
      <li
        v-for="(item, index) in LargeClassData"
        :class="[{'active': index == LargeClassIndex}]"
        :key="index">
        <div class="timeline-item-circular">
          <span class="circular">
            <em>{{index}}</em>
          </span>
        </div>
        <div class="timeline-item-line"></div>
        <div class="timeline-item-content" @click="LargeClassIndex = index">
          <h4>{{ item.name }}</h4>
        </div>
      </li>
    </ul>
  </mt-popup>

  <!-- 中类弹框 -->
  <mt-popup
    v-model="MiddleClassVisible"
    popup-transition="popup-fade"
    position="left"
    class="largeClass-wrapper">
    <ul class="timeline-container">
      <li
        v-for="(item, index) in MiddleClassData"
        :class="[{'active': index == MiddleClassIndex}]"
        :key="index">
        <div class="timeline-item-circular">
          <span class="circular">
            <em>{{index}}</em>
          </span>
        </div>
        <div class="timeline-item-line"></div>
        <div class="timeline-item-content" @click="MiddleClassIndex = index">
          <h4>{{ item.name }}</h4>
        </div>
      </li>
    </ul>
  </mt-popup>

  <!-- 小类弹框 -->
  <mt-popup
    v-model="subClassVisible"
    popup-transition="popup-fade"
    position="left"
    class="largeClass-wrapper">
    <ul class="timeline-container">
      <li
        v-for="(item, index) in subClassData"
        :class="[{'active': index == subClassIndex}]"
        :key="index">
        <div class="timeline-item-circular">
          <span class="circular">
            <em>{{index}}</em>
          </span>
        </div>
        <div class="timeline-item-line"></div>
        <div class="timeline-item-content" @click="subClassIndex = index">
          <h4>{{ item.name }}</h4>
        </div>
      </li>
    </ul>
  </mt-popup>

  <!-- 产品分类 -->
  <div class="vm-isCartgory-warp" v-if="step == 0">
    <h5>样式询价产品分类</h5>
    <search
      @result-click="resultClick"
      @on-submit="onSubmit"
      @on-change="getResult"
      :results="results"
      v-model="value"
      auto-scroll-to-top
      ref="search"
      placeholder="请输入分类名称或编码"></search>
    <ul class="vm-cartgory-list">
      <li
        :class="['vm-cartgory-item', {'active': Large_class}]">
        <span @click="openLarge">{{ Large_content }}</span>
      </li>
      <li
        :class="['vm-cartgory-item', {'active': Middle_class}]"
        @click="openmiddle">
        <span>{{ Middle_content }}</span>
      </li>
      <li
        :class="['vm-cartgory-item', {'active': sub_class}]"
        @click="openSub">
        <span>{{ sub_content }}</span>
      </li>
    </ul>
  </div>
  <div class="vm-isSupplier-warp" v-show="step == 1">
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      :autoFill="false"
      ref="loadmore">
      <h5>选择供应商</h5>
        <ul>
          <li v-for="(item,key) in supplierList" :key="key">
            <div class="supplier-warp">
              <div class="supplier-warp-l">
                <p>
                  <span class="company-name">{{ item.cCompanyName }}</span>
                </p>
                <div class="warp-l-b">
                  <em>行业排名:</em>
                  <span>前10</span>
                </div>
              </div>
              <div class="supplier-warp-r">
                <p>
                  <span class="registered-money">注册资金：{{ item.fRegisteredCapital }}万</span>
                </p>
                <span class="establish-time">成立时间：{{ item.cMakeDate }}</span>
              </div>
              <input
                type="checkbox"
                @change="addsupplierData(key,item)"
                ref="checkbox">
            </div>
          </li>
        </ul>
    </mt-loadmore>
  </div>
  <div class="vm-isbasicInfo-warp"  v-show="step == 2">
    <h5>邀请报价公司</h5>
    <div class="vm-userInfo-warp">
      <div class="company-info">
        <p
          v-for="(item,key) in savesupplistData"
          :key="key">{{item.cCompanyName}}</p>
      </div>
      <ul class="userInfoList">
        <li>
          <x-input title="采购主题" v-model="purchaseMain"></x-input>
        </li>
        <li>
          <x-input title="采购要求" v-model="purchaseRequirement"></x-input>
        </li>
        <li>
          <datetime title="询价截止日期" v-model="purchaseTime" ></datetime>
        </li>
        <li>
          <x-input title="详细地址" v-model="receiving_address"></x-input>
        </li>
        <li>
          <x-address
            title="地址选择"
            v-model="addressValue"
            :list="addressData"
            placeholder="请选择地址"
            @on-shadow-change="getCityData"
          ></x-address>
        </li>
        <li>
          <x-input title="发票要求" v-model="Invoice_requirements"></x-input>
        </li>
      </ul>
      <div class="addEditMetails" @click="addMateriel">
        添加/修改询价物料
      </div>
      <ul class="materielList">
        <li v-for="(item,key) in MaterielArr" :key="key">
          <div class="materiel-list">
            <div class="materiel-list-l">
              <span>{{ item.iName }}</span>
              <p>规格：<em>{{ item.iModel }}</em></p>
            </div>
            <div class="materiel-list-r">
              <span>{{ item.iCode }}</span>
              <p><em>{{ item.cNumber }}</em>{{ item.units }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 添加/修改物料数据 -->
  <div class="vm-addupMateriel" v-show="handlerMateriel">
    <div class="addPriceMateriel">
      <button @click="popupVisible = true">添加询价物料</button>
    </div>
    <!-- 查看当前物料列表 -->
    <ul v-if="handlermodifyMateriel" class="materielList">
      <li v-for="(item,key) in MaterielArr" :key="key">
        <div class="materiel-list">
          <div class="materiel-list-l">
            <span>{{ item.iName }}</span>
            <p>规格：<em>{{ item.iModel }}</em></p>
          </div>
          <div class="materiel-list-r">
            <span>{{ item.iCode }}</span>
            <p><em>{{ item.cNumber }}</em>{{ item.units }}</p>
            <x-icon style="position: absolute;top: -2px;" @click="delMateriel(item.iCode)" type="ios-close-empty" size="24"></x-icon>
          </div>
        </div>
      </li>
    </ul>
    <!-- 修改当前物料列表 -->
    <ul v-else class="modifyList" v-for="(item, key) in MaterielArr" :key="key">
      <li>
        <h6>编号</h6>
        <input type="text" placeholder="请输入添加的物料编号" class="deil-input" v-model="item.iCode">
      </li>
      <li>
        <h6>名称</h6>
        <input type="text" placeholder="请输入添加的物料名称" class="deil-input" v-model="item.iName">
      </li>
      <li>
        <h6>规格型号</h6>
        <input type="text" placeholder="请输入添加的规格型号" style="color: #08b8ff;" class="deil-input" v-model="item.iModel">
      </li>
      <li>
        <h6>数量</h6>
        <input type="text" placeholder="请输入添加的物料数量" style="color: #fe3c30" class="deil-input" v-model="item.cNumber">
      </li>
      <li>
        <h6>计量单位</h6>
        <input type="text" placeholder="请输入添加的计量单位" class="deil-input" v-model="item.units">
      </li>
    </ul>
    <vm-common-noData v-if="!MaterielArr.length"></vm-common-noData>

    <!-- 添加/修改物料弹框 -->
    <mt-popup
      v-model="popupVisible"
      position="top"
      class="material-pop">
      <div class="vm-addMaterielPop">
        <ul>
          <li>
            <h6>编号</h6>
            <input type="text" placeholder="请输入添加的物料编号" class="deil-input" v-model="addMaterielData.code">
          </li>
          <li>
            <h6>名称</h6>
            <input type="text" placeholder="请输入添加的物料名称" class="deil-input" v-model="addMaterielData.name">
          </li>
          <li>
            <h6>规格型号</h6>
            <input type="text" placeholder="请输入添加的规格型号" style="color: #08b8ff;" class="deil-input" v-model="addMaterielData.Specification">
          </li>
          <li>
            <h6>数量</h6>
            <input type="text" placeholder="请输入添加的物料数量" style="color: #fe3c30" class="deil-input" v-model="addMaterielData.num">
          </li>
          <li>
            <h6>计量单位</h6>
            <input type="text" placeholder="请输入添加的计量单位" class="deil-input" v-model="addMaterielData.UnitCompany">
          </li>
        </ul>
        <div class="item-btn">
          <span class="vm-process-prev" @click="popupVisible = false">取消</span>
          <span class="vm-process-next" @click="confirmAddMaterielData">确认</span>
        </div>
      </div>
    </mt-popup>
  </div>
  <!-- 底部导航 start -->
  <div class="vm-footer-warp" v-if="step == 0 || step == 1 || step == 2 || handlermodifyMateriel">
    <div class="vm-footer-warp-l">
      <span>分类：{{ cartgoryName }}</span>
    </div>
    <!-- 选择流程按钮 -->
    <div class="vm-footer-warp-r">
      <span class="vm-process-prev" @click="prevStep" v-if="step > 0"  v-show="!handlerMateriel">上一步</span>
      <span class="vm-process-next" @click="nextStep" v-if="step != 2" v-show="!handlerMateriel">下一步</span>
      <span class="vm-process-next" @click="submitInquiry" v-else v-show="!handlerMateriel">提交询价</span>
      <span class="vm-process-prev" v-show="handlerMateriel" @click="cancelMateriel">取消</span>
      <span class="vm-process-next" v-show="handlerMateriel" @click="confirmSelectMateriel">确认</span>
    </div>
  </div>
  <!-- 修改物料按钮 -->
  <div class="vm-footer-warp" v-else>
    <div class="vm-footer-warp-l"></div>
    <div class="vm-footer-warp-r">
      <span class="vm-process-prev" @click="handlermodifyMateriel = true">取消</span>
      <span class="vm-process-next" @click="handlermodifyMateriel = true">确认</span>
    </div>
  </div>
  <!-- 底部导航 end -->
</div>
</template>

<script>
import { Search, Checklist, Group, XInput, Datetime, Popup, XSwitch, XAddress, PopupPicker, ChinaAddressV4Data   } from 'vux'
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import { Matchingpurchase_QueryName, Matchingpurchase_QueryNameAll, Matchingpurchase_clicksupplierlists, Projectmanage_searchCity, sendRealrequirements, getComData, getIneLists } from '@/api/matching_purchase.js'
import { userInfoByArguments } from '@/utils/userHandler.js'
export default {
  data () {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      step: 0, // 步数
      results: new Array(), // 搜索结果数据
      value: '', // 数据值

      /* 大类数据 start */
      Large_class: false, // 大类样式
      Large_content: '大类', // 大类数据名字
      LargeClassVisible: false, // 大类模态框控制器
      LargeClassIndex: null, // 大类模态框选择索引
      LargeClassData: new Array(), // 大类数据
      /* 大类数据 end */

      /* 中类数据 start */
      Middle_class: false, // 中类样式
      Middle_content: '中类', // 中类数据名字
      MiddleClassVisible: false,
      MiddleClassIndex: null,
      MiddleClassData: new Array(),
      /* 中类数据 end */

      /* 小类数据 start */
      sub_class: false, // 小类样式
      sub_content: '小类', // 小类数据名字
      subClassVisible: false, // 小类弹框
      subClassIndex: null, // 小类模态框选择索引
      subClassData: new Array(),
      categoryCode: '', // 大类code, 获取
      /* 小类数据 end */

      supplierList: new Array(), // 选择供应商数据
      allLoaded: false,
      supplistPage: 0,
      cartgoryName: '',

      purchaseMain: '', // 采购主体
      purchaseRequirement: '', // 采购要求
      purchaseTime: '', // 询价截止日期
      addressValue: [], //收货地址 省、市、区值
      addressData: ChinaAddressV4Data, // 收货地址 省、市、区数据
      receiving_address: '', // 收货地址详情
      Invoice_requirements: '', // 发票要求

      savesupplistData: new Array(), // 保存当前选中的数据

      handlerMateriel: false, // 控制是否显示添加/修改物料页面
      handlermodifyMateriel: false, // 控制是否显示修改按钮
      popupVisible: false, // 询价物料弹框

      // 保存询价物料数组
      MaterielArr: new Array(),
      // 添加询价物料数据
      addMaterielData: {
        code: '', // 编号
        name: '', // 名称
        Specification: '', // 规格型号
        num: '', // 数量
        UnitCompany: '',// 计量单位
      },
      iCode: new Array(),
      iName: new Array(),
      iModel: new Array(),
      cNumber: new Array(),
      units: new Array(),
      // 提交询价数据
      inquiryObj: new Object()
    }
  },
  created () {
    this.getComMData();
  },
  components: {
    'vm-common-header': vmCommonHeader,
    Search,
    Checklist,
    Group,
    XInput,
    Datetime,
    Popup,
    XSwitch,
    XAddress,
    PopupPicker,
  },
  methods: {
    // 选择大类
    openLarge () {  
      // 打开大类模态框
      this.LargeClassVisible = true;
    },
    // 选择中类
    openmiddle () {
      if (!this.Large_class) {
        this.$toast("选择大类数据才可以选择中类数据");
      } else {
        this.MiddleClassVisible = true;
      }
    },
    // 选择小类
    openSub () {
      if (!this.Large_class) {
        this.$toast("选择大类数据才可以选择小类数据");
        return;
      }
      if (!this.Middle_class) {
        this.$toast("选择中类数据才可以选择小类数据");
        return;
      }
      this.subClassVisible = true;
    },
    getComMData () {
      getComData()
        .then(res => res.data)
        .then(data => {
          this.LargeClassData = data.data;
          console.log(this.LargeClassData);
        })
    },
    // 下拉刷新
    loadTop () {
      this.supplistPage = 1;
      this.getsupplistData('top');
      this.$refs.loadmore.onTopLoaded();
    },
    // 上拉加载
    loadBottom () {
      this.supplistPage ++;
      this.getsupplistData('bottom');
      this.$refs.loadmore.onBottomLoaded();
    },
    // 触发方法搜索弹出框
    setFocus () {
      this.$refs.search.setFocus();
    },
    // 点击搜索后结果
    resultClick (item) {
      this.value = item.title;
      /*
      * 判断 如果id6位、则为当前小类，找当前的中类及大类请求赋值到页面
      * 小类 -> 获取中类数据 -> 获取大类数据
      * 中类 -> 获取大类数据 ->
      * 大类 ->
      * */
      let currentId = item.id;
      this.inquiryObj.hdinv = item.id; // 分类编码
      this.inquiryObj.hdinvNm = item.title; // 分类名称
      if (currentId.length == 6) {
        this.sub_class = true;
        this.sub_content = item.title;
        this.cartgoryName = item.title
        this.getCurParentData(item.id).then(res => {
          this.Middle_class = true;
          this.Middle_content = res.data.data[0].cInvClassName;
          let curId = res.data.data[0].cInvClassCode;
          if (curId.length == 4) {
            return this.getCurParentData(curId);
          }
        }).catch(err => console.log(err))
        .then(res => {
          this.Large_class = true;
          this.Large_content = res.data.data[0].cInvClassName;
          this.categoryCode = res.data.data[0].cInvClassCode;
        }).catch(err => console.log(err));
      } else if (currentId.length == 4) {
        this.Middle_class = true;
        this.Middle_content = item.title;
        this.cartgoryName = item.title
        this.getCurParentData(item.id).then(res => {
          this.Large_class = true;
          this.Large_content = res.data.data[0].cInvClassName;
          this.categoryCode = res.data.data[0].cInvClassCode;
        });
      } else if (currentId.length == 2) {
        this.categoryCode = item.id;
        this.Large_class = true;
        this.Large_content = item.title;
        this.cartgoryName = item.title
      }
    },
    /*
    * params
    *  @l -> 当前类型 4为中类 2为大类
    *  @id -> 当前id
    * */
    getCurParentData (id) {
      return new Promise((resolve,reject) => {
        Matchingpurchase_QueryNameAll({val: id}).then(res => {
          if (res.data.status == 200) {
            resolve(res);
          } else {
            reject(res);
          }
        })
      });
    },
    // 实时获取输入的数据
    getResult (val) {
      Matchingpurchase_QueryName({val}).then(res => {
        this.results = getResult(res.data.data);
      })
    },
    // 获取供应商数据
    getsupplistData (loadmoreType) {
      Matchingpurchase_clicksupplierlists({inv_id: this.categoryCode, page: this.supplistPage}).then( res => {
        if (!res.data.data || !res.data.data.length) {
          this.allLoaded = true;
          if (loadmoreType == 'top') {
            this.$refs.loadmore.onTopLoaded();
          }else if(loadmoreType == 'bottom') {
            this.$refs.loadmore.onBottomLoaded();
          }
          return;
        }
        if (!this.supplierList.length) {
          this.supplierList = res.data.data;
        } else {
          this.supplierList = this.supplierList.concat(res.data.data);
        }
        if (loadmoreType == 'top') {
          this.$refs.loadmore.onTopLoaded();
        }else if(loadmoreType == 'bottom') {
          this.$refs.loadmore.onBottomLoaded();
        }
      });
    },
    // 添加当前供应商数据
    addsupplierData (key,data) {
      if ( this.$refs.checkbox[key].checked ) {
        this.savesupplistData.push({
          cCompanyName: data.cCompanyName,
          comID: data.comID,
          key: key
        });
      } else {
        let currentDelIndex = this.savesupplistData.findIndex(item => item.key == key);
        this.savesupplistData.splice(currentDelIndex,1);
      }
      let comIdArr = new Array();
      this.savesupplistData.forEach(item => {
        comIdArr.push(item.comID);
      })
      this.inquiryObj.vend_comID = comIdArr; // 选择的供应商公司id
    },
    onSubmit () {
      this.$refs.search.setBlur();
    },
    // 首次获取中国全部省接口数据
    getsearchCity () {
      Projectmanage_searchCity({Id:0})
        .then(res => res.data)
        .then(res => {
          let CityArr = res.data.map(item => {
            let obj = {};
            obj.value = item.Id;
            obj.name = item.name;
            return obj;
          })
          this.addressData = CityArr;
          this.getCityData([CityArr.Id]);
        })
    },
    // 获取该id,截去后俩位0
    getCityData (CityCode) {
      this.inquiryObj.province = CityCode[0].substring(0, 2); // 省
      this.inquiryObj.city = CityCode[1].substring(0, 4); // 市
      this.inquiryObj.country = CityCode[2].substring(0, 6); // 区
    },
    // 点击添加/修改询价物料
    addMateriel () {
      this.step = null;
      this.handlerMateriel = true;
      this.handlermodifyMateriel = true;
      this.pageTitle = '添加/修改物料';
    },
    // 取消添加/修改询价物料
    cancelMateriel () {
      this.step = 2;
      this.handlerMateriel = false;
      this.pageTitle = '发布匹配采购'
    },
    // 确定添加/修改询价物料
    confirmSelectMateriel () {
      this.step = 2;
      this.handlerMateriel = false;
    },
    // 添加询价物料 -> 确认按钮
    confirmAddMaterielData () {
      let addMaterielData = this.addMaterielData;
      if ( addMaterielData.code == '' ) {
        this.$toast('请输入要添加物料的编号');
        return;
      } else if( addMaterielData.name == '' ) {
        this.$toast('请输入要添加物料的名称');
        return;
      } else if ( addMaterielData.Specification == '' ) {
        this.$toast('请输入要添加物料的物料规格型号');
        return;
      } else if ( addMaterielData.num == '' ) {
        this.$toast('请输入要添加物料的物料数量');
        return;
      } else if (addMaterielData.UnitCompany == '') {
        this.$toast('请输入要添加物料的计量单位');
        return;
      }
      let MaterielFlag = this.MaterielArr.some(item => {
        if ( item.code == this.addMaterielData.code ) {
          this.$toast('不能添加重复的编号数据');
          return item.code == this.addMaterielData.code;
        } else if (item.name == this.addMaterielData.name ) {
          this.$toast('不能添加重复的名称数据');
          return item.name == this.addMaterielData.name;
        }
      });

      !MaterielFlag && this.MaterielArr.push({
        iCode: this.addMaterielData.code,
        iName: this.addMaterielData.name,
        iModel: this.addMaterielData.Specification,
        cNumber: this.addMaterielData.num,
        units: this.addMaterielData.UnitCompany
      });
      this.iCode.push(this.addMaterielData.code);
      this.iName.push(this.addMaterielData.name);
      this.iModel.push(this.addMaterielData.Specification);
      this.cNumber.push(this.addMaterielData.num);
      this.units.push(this.addMaterielData.UnitCompany);
      this.inquiryObj.iCode = this.iCode;
      this.inquiryObj.iName = this.iName;
      this.inquiryObj.iModel = this.iModel;
      this.inquiryObj.cNumber = this.cNumber;
      this.inquiryObj.units = this.units;
      this.popupVisible = false;
    },
    // 删除询价物料
    delMateriel (code) {
      let Findex = this.MaterielArr.findIndex(item => item.code == code);
      this.MaterielArr.splice(Findex,1);
    },
    // 修改询价物料
    modifyMateriel () {
      this.handlermodifyMateriel = false;
    },
    // 点击上一步
    prevStep () {
      if (this.step <= 0) {
        return;
      }
      this.step --;
    },
    // 提交询价功能
    submitInquiry () {
      if (this.purchaseMain == '') {
        this.$toast('请填写采购主题..');
        return;
      } else if (this.purchaseRequirement == '') {
        this.$toast('请填写采购要求..');
        return;
      } else if (this.Invoice_requirements == '') {
        this.$toast('请填写发票要求..');
        return;
      } else if (this.purchaseTime == '') {
        this.$toast('请选择询价截止日期..');
        return;
      } else if (this.receiving_address == '') {
        this.$toast('请填写详细地址..');
        return;
      } else if (!this.MaterielArr.length) {
        this.$toast('请添加物料数据..');
        return;
      }
      let inquiryObj = this.inquiryObj;
      inquiryObj.cCompanyName = userInfoByArguments("companyName"); // 当前登录的公司名称
      inquiryObj.companyId = userInfoByArguments("company_id"); // 当前登录的公司名称
      inquiryObj.detailname = this.purchaseMain; // 采购主题
      inquiryObj.Requirement = this.purchaseRequirement; // 采购要求
      inquiryObj.invoice = this.Invoice_requirements; // 发票要求
      inquiryObj.endtime = this.purchaseTime; // 询价截止日期
      inquiryObj.cAddress = this.receiving_address; // 详细地址
      inquiryObj.cUserId = userInfoByArguments("user_id"); // 当前登录的人员id
      sendRealrequirements(JSON.stringify(this.inquiryObj))
        .then(res => res.data)
        .then(res => {
          console.log(res);
          if (res.data == 1 && res.status == 200) {
            this.$toast('操作成功!');
            setTimeout(() => {
              this.$router.push({path: '/matching_purchase_list'});
            },2000)
          } else {
            this.$toast('操作失败!');
            this.$router.push({path: '/matching_purchase'});
          }
        })
    },
    // 点击下一步
    nextStep () {
      if (this.step >= 2) {
        return;
      }
      if (this.step == 0) {
        if (!this.categoryCode) {
          this.$toast('请选择产品分类');
          return
        };
        this.getsupplistData();
      } else if ( this.step == 1 ) {
        if (!this.savesupplistData.length) {
          this.$toast('请选择供应商');
          return
        };
      }
      this.step ++;
    },
    // 获取中、小类数据
    getcatgoryData (i, id) {
      var inv_id = id;
      getIneLists({inv_id})
        .then(res => res.data)
        .then(data => {
          if (i == 1) {
            // 中类赋值
            this.MiddleClassData = data.data;
          } else if (i == 2) {
            // 小类赋值
            this.subClassData = data.data;
          }
        })
    }
  },
  computed: {},
  watch: {
    value (value) {
      if ( value == '') {
        this.Large_class = false;
        this.Large_content = '大类';
        this.Middle_class = false;
        this.Middle_content = '中类';
        this.sub_class = false;
        this.sub_content = '小类';
        this.categoryCode = '';
        this.cartgoryName = '';
      }
      this.getcatgoryData(1,id);
      this.getcatgoryData(2,id);
    },
    popupVisible (newV, oldV) {
      if (newV) {
        document.getElementsByClassName('vm-footer-warp')[0].style.display = 'none';
        document.getElementsByClassName('vm-addupMateriel')[0].style.height = '100%';
      } else {
        document.getElementsByClassName('vm-footer-warp')[0].style.display = 'flex';
        document.getElementsByClassName('vm-addupMateriel')[0].style.height = 'calc(100% - 1.333333rem)';
      }
    },
    LargeClassIndex (newV,oldV) {
      if (newV != oldV) {
       /* 选择大类后初始化中类小类 start */
        this.MiddleClassIndex = null;
        this.subClassIndex = null;

        this.Middle_class = false; 
        this.sub_class = false;
        
        this.Middle_content = '中类';
        this.sub_content =  '小类';
        /* 选择大类后初始化中类小类 end */
      }
      this.Large_class = true; // 大类样式改变
      this.Large_content = this.LargeClassData[newV].name; // 大类内容改变
      this.cartgoryName = this.LargeClassData[newV].name; // 分类名称
      this.value = this.LargeClassData[newV].name; // 赋值大类input数据
      this.LargeClassVisible = false; // 大类弹框关闭
      let id = this.LargeClassData[newV].id; // 当前大类id,获取中类数据使用。
      this.categoryCode = id; // 分类code
      this.getcatgoryData(1,id);
    },
    MiddleClassIndex (newV, oldV) {
      if (newV != oldV) {
        this.subClassIndex = null;
        this.sub_class = false;
        this.sub_content =  '小类';
      }
      if (this.MiddleClassData[newV]) {
        this.Middle_class = true;
        this.Middle_content = this.MiddleClassData[newV].name;
        this.cartgoryName = this.MiddleClassData[newV].name; // 分类名称
        this.value = this.MiddleClassData[newV].name; // 赋值中类input数据
        this.MiddleClassVisible = false;
        let id = this.MiddleClassData[newV].id; // 当前中类id,获取中类数据使用。
        this.categoryCode = id;
        this.getcatgoryData(2,id);
      }
    },
    subClassIndex (newV) {
      if (this.subClassData[newV]) {
        this.sub_class = true;
        this.sub_content =  this.subClassData[newV].name;
        this.subClassVisible = false;
        this.cartgoryName = this.subClassData[newV].name; // 分类名称
        this.value = this.subClassData[newV].name; // 赋值小类input数据
        let id = this.subClassData[newV].id; // 当前中类id,获取中类数据使用。
        this.categoryCode = id;
      }
    }
  }
}
// 获取数据
function getResult(data){
  let rs = [];
  data.forEach(function (item) {
    rs.push({
      title: item.name,
      id:  item.id
    });
  });
  return rs
}
</script>

<style lang="scss">
  .weui-cells {
    .weui-cell_access {
      height: 80px !important;
      padding-left: 30px !important;
      text-align: left !important;
      p {
        font-size: 28px;
      }
    }
  }
  .weui-search-bar__form {
    display: flex;
    justify-content: flex-start;
  }
  .weui-search-bar__box {
    .weui-icon-search {
      display: none;
    }
  }
  .weui-search-bar {
    padding: 0 !important;
  }
  .weui-input {
    padding: 0 !important;
    margin: 0 !important;
  }
  .weui-cell {
    width: 100%;
  }

  .vux-search-box {
    .weui-search-bar {
      .weui-icon-search {
        font-size: 30px;
      }
      .weui-search-bar__input {
        margin: 0;
        text-align: left;
      }
      .weui-search-bar__label {
        text-align: left;
      }
      .weui-search-bar__cancel-btn {
        font-size: 26px;
      }
      .weui-icon-clear {
        font-size: 30px;
      }
    }
  }

  input[type=text] {
    padding: 0;
    margin: 0;
    border: none;
  }
  .weui-cell {
    width: 100%;
    display: flex;
  }
   .weui-cell__hd {
    margin-right: 20px;
  }
  .vux-popup-picker-select {
    text-align: left !important;
  }
  .weui-cell_access .weui-cell__ft {
    margin-left: 20px;
    text-align: left;
  }
  .vux-datetime p {
    font-size: 0.373333rem;
    display: block;
    word-wrap: break-word;
    word-break: break-all;
  }
  .weui-icon-clear {
    font-size: 30px;
  }
  .vux-popup-header-left {
    font-size: 0.426667rem;
  }
  .vux-popup-header-right {
    font-size: 0.426667rem;
  }
  /*询价截止日期*/
  .dp-container {
    .dp-item.dp-left,
    .dp-item.dp-right {
      font-size: 32px;
    }
    .dp-content {
      .scroller-item {
        font-size: 32px;
      }
    }
  }
  .vux-cell-box {
    width: 100%;
  }
  .mint-search {
    height: 106px;
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #ffffff;
  }
  .mint-searchbar {
    padding: 0;
    width: 100%;
    border-radius: 20px !important; /* no */
    border: 1px solid #dddddd; /* no */
    background-color: #fff;
    margin:0 40px;
  }
  .mint-searchbar-inner {
    padding: 0;
    height: 55px;
    background: none;
  }
  i.mintui.mintui-search {
    font-size: 28px;
    color: #cccccc;
    padding: 0 10px 0 18px;
    &::before {
      vertical-align: middle;
    }
  }
  .vm-common-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 55px;
    line-height: 55px;
    border-radius: 20px;
    font-size: 26px;
  }
  .mint-searchbar-cancel {
    margin-right: 10px;
    color: #cccccc;
  }
  i.vm-icon.screen {
    text-align: center;
    margin: 0 29px;
    width: 32px;
    height: 32px;
    background-position: -87px -35px;
    top: 0;
    right: 0;
  }
  .mint-searchbar-core {
    font-size: 28px;
    line-height: 55px;
    vertical-align: middle;
    color: #000000;
    background: none;
    height: inherit;
    text-align: left;
    border: 0;
    border-radius: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-user-select: text;
    outline: 0;
    -webkit-appearance: none;
  }
  .dp-container {
    background: #4c4c4c;
  }
  .scroller-mask {
  }


</style>

<style scoped lang="scss">
body {
  overflow: hidden !important;
}

/* 大类弹框样式 */
.largeClass-wrapper {
  height: 100%;
  width: 550px;
  padding-top: 128px;
  overflow: scroll;
}
.largeClass-wrapper .timeline-container {
  text-align: left;
  padding: 70px 22px 0 33px;
}
.largeClass-wrapper .timeline-container > li {
  position: relative;
  overflow: hidden;
}
.largeClass-wrapper .timeline-container > li.active .timeline-item-circular > .circular {
  border: 1px solid #d9261d; /* no */
}
.largeClass-wrapper .timeline-container > li.active .timeline-item-circular > .circular em{
  background-color: #d9261d;
}
.largeClass-wrapper .timeline-container > li.active .timeline-item-content > h4{
  color: #d9261f;
}
.largeClass-wrapper .timeline-container > li:last-child .timeline-item-line {
  display: none;
}
.largeClass-wrapper .timeline-container .timeline-item-circular {
  position: absolute;
}
.largeClass-wrapper .timeline-container .timeline-item-circular .circular {
  display: flex;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border: 1px solid #D3D3D3; /* no */
  padding: 4px; /* no */
  position: relative;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.largeClass-wrapper .timeline-container .timeline-item-circular .circular > em {
  background-color: #d2d2d2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 3px; /* no */
  right: 3px; /* no */
  bottom: 3px; /* no */
  left: 3px; /* no */
  border-radius: 50%;
  color: #ffffff;
}
.largeClass-wrapper .timeline-container .timeline-item-line {
  position: absolute;
  width: 2px;/* no */
  border-left: 2px dashed #979797; /* no */
  height: 100%;
  left: 60px;
  top: 30px;/* no */
  margin-left: -32px;
}
.largeClass-wrapper .timeline-container .timeline-item-content {
  display: flex;
  font-size: 28px;
  color: #333333;
  text-align: left;
  padding: 10px 0 90px 75px;
}
.largeClass-wrapper .timeline-container .timeline-item-content > h4 {
  line-height: 40px !important;
  flex: 1;
  margin-left: 15px;
}
.largeClass-wrapper .timeline-container .timeline-item-content h4 > em{
  color: #009dff;
  font-size: 28px;
}


/* 进度条样式 */
.vm-process-warp {
 height: 107px;
 background-color: #fff;
 margin-bottom: 30px;
 ul {
   display: flex;
   li {
     position: relative;
     flex: 1;
     width: 100%;
     background-color: #d0d0d0;
     height: 5px; /* no  */
     margin-top: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     h1 {
       font-size: 24px;
       position: absolute;
       top: -40px;
     }
     .step {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 30px;
       height: 30px;
       border-radius: 50%;
       font-size: 18px;
       background-color: #d0d0d0;
       color: #333333;
     }
     &.active {
       background-color: #fe3c30;
       h1 {
         color: #ff3c33;
       }
       .step {
         background-color: #fd3c32;
         color: #fff;
       }
     }

   }
 }

}
/* 选择分类样式 */
.vm-isCartgory-warp{
  position: relative;
  padding: 0 35px 0 35px;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
  h5 {
    margin-top: 28px;
    color: #000;
    font-size: 28px;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    &::before {
      content: '';
      width: 5px;
      height: 26px;
      vertical-align: top;
      display: inline-block;
      background-color: #f34c4f;
      margin-right: 15px;
    }
  }
  .mint-searchbar {
    margin: 0 !important;
  }
  .vm-cartgory-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border-top: 1px solid #dddddd; /* no */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      height: 70px;
      width: 180px;
      background-color: #fe3c30;
      color: #ffffff;
      font-size: 26px;
      border-radius: 20px; /* no */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
    }
  }
}
/* 1.选择分类数据样式 */
.vm-cartgory-list {
  display: flex;
  margin-top: 30px;
  li.vm-cartgory-item {
    border-radius: 15px; /* no */
    border: 1px solid #dddddd; /* no */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    margin-right: 10px;
    color: #999999;
    font-size: 26px;
    &.active {
      border: 1px solid #fe3c30; /* no */
      color: #fe3c30;
    }
    span {
      width: 218px;
      display: inline-block;
      padding: 0 30px;
      white-space: nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
    }
  }
}
/* 2.选择供应商样式 */
.vm-isSupplier-warp {
  padding: 0 35px 0 35px;
  height: calc( 100% - 237px );
  background-color: #ffffff;
  overflow: scroll;
  h5 {
    color: #000;
    font-size: 28px;
    height: 87px;
    display: flex;
    align-items: center;
    background-color: #fff;
    &::before {
      content: '';
      width: 5px;
      height: 26px;
      vertical-align: top;
      display: inline-block;
      background-color: #f34c4f;
      margin-right: 15px;
    }
  }
  ul {
    display: flex;
    flex-direction: column;
    li {
      width: 100%;
      min-height: 160px;
      .supplier-warp {
        text-align: left;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        padding-top: 20px;
        p {
          min-height: 70px;
          text-align: left;
        }
        .supplier-warp-l{
          flex: 1;
          span.company-name {
            font-size: 28px;
            color: #333333;
          }
          .warp-l-b {
            font-size: 24px;
            em {
              color: #666666;
            }
            span {
              color: #04b8fe;
            }
          }
        }
        .supplier-warp-r{
          width: 300px;
          text-align: right;
          margin-right: 10px;
          p {
            text-align: right;
          }
          span.registered-money {
            font-size: 22px;
            color: #fff;
            background-color: #fd9732;
            padding: 3px 10px;
            border-radius: 10px; /* no */
          }
          .establish-time {
            font-size: 24px;
            color: #999999;
          }
        }
      }
    }
  }
}
/* 3.基本信息样式 */
.vm-isbasicInfo-warp {
  height: calc( 100% - 237px );
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  overflow: scroll;
  h5 {
    padding: 30px 0 30px 35px;
    border-bottom: 1px solid #eeeeee; /* no */
    font-size: 30px;
    color: #333333;
  }
  .vm-userInfo-warp {
    padding-left: 30px;
    width: 100%;
    .addEditMetails {
      margin: 40px 90px 50px 30px;
      border: 1px solid #fe3c30; /* no */
      border-radius: 15px; /*  no */
      height: 55px;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 28px;
      color: #ff3c35;
    }
    & > ul.userInfoList {
      li {
        height: 87px;
        border-bottom: 1px solid #dddddd; /* no */
        display: flex;
        align-items: center;
        font-size: 28px;
        color: #999;
      }
    }
    & > ul.materielList {
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      margin-right: 30px;
      margin-bottom: 30px;
      li {
        border-bottom: 1px solid #eeeeee; /* no */
        &:nth-child(2n-1) {
          background-color: #f5f5f5;
        }
        &:nth-child(2n) {
          background-color: #ffffff;
        }
      }
      div.materiel-list {
        display: flex;
        padding: 37px 60px 40px 37px;
        div.materiel-list-l{
          width: 60%;
          text-align: left;
          span {
            display: flex;
            font-size: 30px;
            color: #333333;
            margin-bottom: 30px;
          }
          p {
            font-size: 25px;
            color: #666666;
            em {
              font-size: 25px;
              color: #07b7fe;
            }
          }
        }
        div.materiel-list-r{
          width: 40%;
          text-align: right;
          position: relative;
          span {
            justify-content: flex-end;
            display: flex;
            font-size: 22px;
            color: #999999;
            margin-bottom: 30px;
          }
          p {
            font-size: 24px;
            color: #999999;
            em {
              color: #f35b60;
              font-size: 24px;
            }
          }
        }
      }
    }
  }
  .company-info {
    margin-top: 20px;
    min-height: 185px;
    border-bottom: 1px solid #ececec; /* no */
    p {
      font-size: 30px;
      color: #333333;
    }
  }
}
/* 4.添加物料 */
.vm-header-container {
  span.modify {
    right: 0;
    position: absolute;
    height: 128px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #ffffff;
  }
}
.vm-addupMateriel {
  .addPriceMateriel {
    display: flex;
    align-items: center;
    height: 120px;
    padding: 0 90px 0 60px;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee; /* no */
    button {
      width: 100%;
      height: 56px;
      border: 1px solid #fe3c30; /* no */
      border-radius: 10px; /* no */
      font-size: 28px;
      color: #ff3b30;
    }
  }
  & > ul.materielList {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    li {
      border-bottom: 1px solid #eeeeee; /* no */
      &:nth-child(2n-1) {
        background-color: #f5f5f5;
      }
      &:nth-child(2n) {
        background-color: #ffffff;
      }
    }
    div.materiel-list {
      display: flex;
      padding: 37px 60px 40px 37px;
      div.materiel-list-l{
        width: 60%;
        text-align: left;
        span {
          display: flex;
          font-size: 30px;
          color: #333333;
          margin-bottom: 30px;
        }
        p {
          font-size: 25px;
           color: #666666;
          em {
            font-size: 25px;
            color: #07b7fe;
          }
        }
      }
      div.materiel-list-r{
        width: 40%;
        text-align: right;
        position: relative;
        span {
          justify-content: flex-end;
          display: flex;
          font-size: 20px;
          color: #999999;
          margin-bottom: 30px;
        }
        p {
          font-size: 24px;
          color: #999999;
          em {
            color: #f35b60;
            font-size: 20px;
          }
        }
      }
    }
  }
  & > ul.modifyList {
    display: flex;
    flex-direction: column;
    margin: 20px;
    padding: 30px 80px 0 40px;
    background-color: #ffffff;
    li {
      display: flex;
      margin-bottom: 30px;
      text-align: left;
      h6 {
        font-size: 28px;
        color: #333333;
        width: 150px;
      }
      input.deil-input {
        color: #666666;
        margin-right: 15px;
        font-size: 30px;
        height: 100%;
        border-bottom: 1px solid #dcdcdc; /* no */
        display: inline-block;
        flex: 1;
        padding-bottom: 30px;
      }
    }
  }
}
.material-pop {
  width: 100%;
  position: absolute;
  top: 20%;
  padding: 0 20px;
  background: transparent;
  .vm-addMaterielPop {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px; /* no */
    ul {
      display: flex;
      flex-direction: column;
      li {
        display: flex;
        margin-bottom: 30px;
        text-align: left;
        h6 {
          font-size: 28px;
          color: #333333;
          width: 150px;
        }
        input.deil-input {
          color: #666666;
          margin-right: 20px;
          font-size: 30px;
          height: 100%;
          border-bottom: 1px solid #dcdcdc; /* no */
          display: inline-block;
          flex: 1;
          padding-bottom: 20px;
        }
      }
    }
    .item-btn {
      display: flex;
      span {
        width: 180px;
        height: 80px;
        border: 1px solid #fe3c30;/* no */
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px; /* no */
        flex: 1;
      }
      span.vm-process-prev {
        background-color: #fff;
        color: #fe3c30;
        font-size: 26px;
        margin-right: 20px;
      }
      span.vm-process-next {
        background-color: #fe3c30;
        color: #fff;
        font-size: 26px;
      }
    }

  }
}
.vm-addupMateriel {
  overflow: scroll;
  height: calc(100% - 100px);
  position: relative;
  width: 100%;
}
/* 页面底部上一级下一级 */
.vm-footer-warp {
  border-top: 1px solid #dddddd; /* no */
  background-color: #fff;
  z-index: 999;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .vm-footer-warp-l{
    text-align: left;
    width: 55%;
    margin-left: 20px;
    span {
      font-size: 24px;
      color: #9a9a9a;
    }
  }
  .vm-footer-warp-r{
    justify-content: flex-end;
    display: flex;
    width: 45%;
    margin-right: 20px;
    span {
      width: 180px;
      height: 70px;
      border: 1px solid #fe3c30;/* no */
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px; /* no */
    }
    span.vm-process-prev {
      background-color: #fff;
      color: #fe3c30;
      margin-right: 5px;
      font-size: 26px;
    }
    span.vm-process-next {
      background-color: #fe3c30;
      color: #fff;
      font-size: 26px;
    }
  }
}
.mint-cell {
  background-color:#fff;
  box-sizing:border-box;
  color:inherit;
  min-height:48px;
  display:block;
  overflow:hidden;
  position:relative;
  text-decoration:none;
}
.mint-cell img {
  vertical-align:middle;
}
.mint-cell:first-child .mint-cell-wrapper {
  background-origin:border-box;
}
.mint-cell:last-child {
  background-image:-webkit-linear-gradient(bottom, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-image:linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:bottom;
}
.mint-cell-wrapper {
  background-image:-webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-image:linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-size: 120% 1px;
  background-repeat: no-repeat;
  background-position: top left;
  background-origin: content-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  line-height: 1;
  min-height: inherit;
  overflow: hidden;
  padding: 0 10px;
  width: 100%;
}
.mint-cell-mask {}
.mint-cell-mask::after {
  background-color:#000;
  content:" ";
  opacity:0;
  top:0;
  right:0;
  bottom:0;
  left:0;
  position:absolute;
}
.mint-cell-mask:active::after {
  opacity:.1;
}
.mint-cell-text {
  vertical-align: middle;
}
.mint-cell-label {
  color: #888;
  display: block;
  font-size: 12px;
  margin-top: 6px;
}
.mint-cell-title {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.mint-cell-value {
  color: #888;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mint-cell-value.is-link {
  margin-right:24px;
}
.mint-cell-left {
  position: absolute;
  height: 100%;
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.mint-cell-right {
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.mint-cell-allow-right::after {
  border: solid 2px #c8c8cd;
  border-bottom-width: 0;
  border-left-width: 0;
  content: " ";
  top:50%;
  right:20px;
  position: absolute;
  width:5px;
  height:5px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
</style>
